<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <title>体验VUE</title>
  <!-- 在 HTML 文档中通过 script 元素导入 vue 库 -->
  <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

<h3>体验VUE双向绑定( Vue 3.x )</h3>

<div id="app">
  <!-- 使用 v-model 指令绑定属性 -->
  <input type="text" v-model="nickname">
  <!-- 插值表达式 -->
  <p>插值表达式: {{nickname}}</p>
  <hr>
  <p v-once>v-once: {{nickname}}</p>
  <hr>
  <p>
    v-text: <span v-text="nickname"></span>
  </p>
  <hr>
  {{content}}
  <hr>
  v-html:
  <div v-html="content"></div>
  <hr>
  v-pre:
  <div v-pre>
    <p>{{这里的内容是不会被编译的}}</p>
  </div>
</div>

<a href="/index.html">返回首页</a>

<script>
  const options = {
    data(){
      let x = {
        nickname: '张仙姑神功盖世一桶浆糊',
        content: '<div style="border:1px solid blue ">hello</div>'
      }
      return x;
    }
  }

  const app = Vue.createApp( options );
  app.mount( '#app' );
</script>

</body>
</html>